<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="common/common_header :: common_header(~{::title},~{})">
    <title>html</title>
</head>
<body>
<div class="container">
    <div class="allBorder">
        <div id="app"  v-cloak>
            <v-loader :loadercourt="loadercourt"></v-loader>
            <v-msgblock ></v-msgblock>
            <div class="modal fade" id="deleteWarmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"  @click="closeDeleteModal"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Warmming</h4>
                        </div>
                        <div class="modal-body">
                            <v-msgblock :closebutton="false"></v-msgblock>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" @click="closeDeleteModal">Cancle</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"  @click="handleConfirmDelete">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Delete Warm Msg Modal -->
            <fieldset>
                <legend>Table</legend>

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <div class="col-md-2 control-label">
                            User name
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control searchInput" v-model="searchdto.userName"/>
                        </div>
                        <div class="col-md-2 control-label">
                            Password
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control searchInput" v-model="searchdto.password"/>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-md-2 "></div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary searchButton " @click="handleSearch">Search</button>
                        </div>

                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleReset">Reset</button>
                        </div>
                    </div>

                </form>


                <v-table
                        :titles="titles" :columnnames="columnnames" :searchdto="searchdto"
                        :sortkeys="sortkeys" :sortbols="sortbols" :url="url"
                        :headers="headers"  :dispalycheckbox="dispalycheckbox" :asnycajax="asnycajax"
                        :tableid="tableid" :pagelimitid="pagelimitid" :exampleid="exampleid" :showpaglimitparam="showpaglimitparam"
                        ref="mychildtable" @rowselected="handleGetChildTableCheckboxArray" @rowclicked="handleRowclick">
                </v-table>



                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <div class="col-md-3 "></div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary" @click="handleAdd" :disabled="disableAdapterAdd">Add</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary" @click="handleUpdate" :disabled="disableAdapterUpdate">Update</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-danger" @click="handleDelete" :disabled="disableAdapterDelete">Delete</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-warning" @click="handleSave" :disabled="disableAdapterSave">Save</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleCancel" :disabled="disableAdapterCancel">Cancel</button>
                        </div>
                    </div>
                </form>


                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <div class="col-md-2 control-label">
                            Action:{{action}}
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-2 control-label">
                            User name
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control searchInput" v-model="detailDto.userName"/>
                        </div>
                        <div class="col-md-2 control-label">
                            Password
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control searchInput" v-model="detailDto.password"/>
                        </div>
                    </div>

                </form>


            </fieldset>



        </div>
    </div>
</div>
<div th:replace="common/common_foot :: foot"></div>
<script>
    //根对象
    var app=new Vue({
        el:'#app',
        data:{
            titles:['id','user name','password'],
            columnnames:['id','userName','password'],
            sortkeys:['0','1','2'],
            sortbols:[true,true,true],
            searchdto:{userName:'',password:''},
            url:'/original/searrchByHelper',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
            },
            dispalycheckbox:true,
            asnycajax:true,
            tableid:'tableResult',
            pagelimitid:'pageLimit',
            exampleid:'example',
            showpaglimitparam:true,
            detailDtos:[],
            action:'',
            loadercourt:60*60*24,
            detailDto:{},

            disableAdapterAdd:false,
            disableAdapterUpdate:true,
            disableAdapterDelete:true,
            disableAdapterSave:false,
            disableAdapterCancel:false,



        },
        watch:{

            detailDtos:function () {
                if(this.action=='Cancel'||this.action==''){
                    if(this.detailDtos.length==0){
                        this.disableAdapterUpdate=true;
                        this.disableAdapterDelete=true;
                    }else if(this.detailDtos.length==1){
                        this.disableAdapterUpdate=false;
                        this.disableAdapterDelete=false;
                    }else if(this.detailDtos.length>1){
                        this.disableAdapterUpdate=true;
                        this.disableAdapterDelete=false;
                    }
                }

            },
            action:function () {
                if(this.action=='Add'){
                    this.disableAdapterAdd=true;
                    this.disableAdapterUpdate=true;
                    this.disableAdapterDelete=true;
                    this.disableAdapterSave=false;
                    this.disableAdapterCancel=false;
                }else if(this.action=='Update'){
                    this.disableAdapterAdd=true;
                    this.disableAdapterUpdate=true;
                    this.disableAdapterDelete=true;
                    this.disableAdapterSave=false;
                    this.disableAdapterCancel=false;
                }else if(this.action=='Delete'){

                }else if(this.action=='Cancel'){
                    this.disableAdapterAdd=false;
                    this.disableAdapterUpdate=true;
                    this.disableAdapterDelete=true;
                    this.disableAdapterSave=true;
                    this.disableAdapterCancel=false;
                }else if(this.action==''){
                    this.disableAdapterAdd=false;
                    this.disableAdapterUpdate=true;
                    this.disableAdapterDelete=true;
                    this.disableAdapterSave=true;
                    this.disableAdapterCancel=false;
                }else if(this.action==null){
                    this.disableAdapterAdd=false;
                    this.disableAdapterUpdate=true;
                    this.disableAdapterDelete=true;
                    this.disableAdapterSave=true;
                    this.disableAdapterCancel=false;
                }
            }
        },

        filters:{

        },

        mounted:function() {

        },
        methods:{

            handleSearch:function () {
                this.$refs.mychildtable.searchList();
            },

            handleGetChildTableCheckboxArray:function(detailDtos){
                this.detailDtos=detailDtos;
                if(detailDtos.length==1){
                    this.detailDto=JSON.parse(JSON.stringify(detailDtos[0]));// deep copy
                }else {
                    this.detailDto={}
                }

            },

            handleRowclick:function (index) {
                console.log(index);
                this.action='';
            },

            handleReset:function () {
                this.searchdto={};
                this.$refs.mychildtable.clearTable();
                bus.$emit('clear-message',[]);
            },

            handleAdd:function(){
                this.searchdto={};
                this.action="Add";
                this.$refs.mychildtable.clearRowSelected();
                console.log(this.action);

            },

            handleUpdate:function(){
                this.action="Update";
                console.log(this.action);

            },

            handleDelete:function () {
                console.log(this.detailDtos);
                this.action="Delete";
                console.log(this.action);
                bus.$emit('display-message',"W-CMN-001",["PloicyItemAdjustment"]);
                $('#deleteWarmModal').modal('show')
            },

            closeDeleteModal:function () {
                bus.$emit('clear-message',[]);
            },

            handleConfirmDelete:function () {
                console.log('handleConfirmDelete');
                var data=[];
                data=this.detailDtos;
                var _this=this;
                $.ajax({
                    url:'/original/delete',
                    type: "post",
                    headers:_this.headers,
                    data:JSON.stringify(data),
                    dataType:'json',
                    async: true,
                    error:function(error){
                        bus.$emit('on-message',error);
                    },
                    success:function(data){
                        if(data>0){
                            _this.action='';
                            _this.searchdto={};
                            _this.$refs.mychildtable.clearRowSelected();
                            _this.$refs.mychildtable.clearTable();
                            bus.$emit('clear-message',[]);
                            bus.$emit('display-message',"I-CMN-002",["Nothing"]);
                            _this.$refs.mychildtable.searchList();
                        }else {
                            bus.$emit('display-message',"E-CMN-004",["Nothing"]);
                        }
                    }
                });
            },

            handleSave:function(){
                var data={};
                data=this.detailDto;
                data.actionState=this.action;
                var _this=this;
                $.ajax({
                    url:'/original/save',
                    type: "post",
                    headers:_this.headers,
                    data:JSON.stringify(data),
                    dataType:'json',
                    async: true,
                    error:function(error){
                        bus.$emit('on-message',error);
                    },
                    success:function(data){
                        if(data>0){
                            _this.action='';
                            _this.searchdto={};
                            _this.$refs.mychildtable.clearRowSelected();
                            _this.$refs.mychildtable.clearTable();
                            bus.$emit('clear-message',[]);
                            bus.$emit('display-message',"I-CMN-001",["Nothing"]);
                            _this.$refs.mychildtable.searchList();
                        }else{
                            bus.$emit('display-message',"E-CMN-003",["Nothing"]);
                        }
                    }
                });
            },

            handleCancel:function(){
                this.$refs.mychildtable.clearRowSelected();
                this.action='Cancel';
            },



        }
    });

    //改变表格单元格宽度
    changeTableWidth(app.$data.tableid)

    //全局过滤器
    Vue.filter('formatfunc', function (value,key) {
        var resultValue=null;
        switch(key) {
            case 'userName':
                resultValue=value+'  ***'
                break;
            case 'password':
                resultValue=value+'  ##'
                break;
            default:
                resultValue=value;

        }
        return resultValue;//
    });
</script>
</body>
</html>
